昨天決定了接下來的鐵人賽將要以Cursor 作為 Vibe Coding 的主力戰艦，但接下來我所遇到下一個挑戰就是該如何給 AI下 Prompt? 首先要知道我所選的Cursor，他是一個AI本身就在住在我的專案當中，所以我要下的Prompt不再像以前要將程式碼複製貼上到Chatgpt or Gemini之類的AI工具，而是要將重點擺在 「精準的引導AI讀取到正確檔案，並且給出清晰的實作邊界」。
在 Vibe Coding 的過程中， AI 是一個能力極強、但需要明確指示的工具。以下是三個核心撰寫的技巧:

** 1.Context Referencing**
明確指定檔案及指定技術文件(若引入新套件可以使用 @Docs 讓 AI 直接閱讀官方最新文件。
2.Role-Task-Constraint
避免模糊的描述，採用「角色設定 + 具體任務 + 限制條件」的格式：
角色：「你現在是一位精通前端與 PWA 架構的資深工程師...」
任務：「請在首頁實作一個用於記錄運動次數的純數字鍵盤介面...」
限制：「請使用純粹的 HTML/CSS Grid 完成排版，不要引入任何第三方的 UI 框架，並確保在手機端的操作手感。」
3.Step-by-Step
不要一次下達「幫我寫出完整的健身追蹤系統」這種指令。應該將任務拆解，讓 AI 分階段產出，才能在每個節點進行確認與微調。

實戰對比：NG 指令 vs. 高效指令
NG版: 「幫我做一個健身用的數字鍵盤，要好看一點。」(太過籠統AI只能隨機猜測你想要的框架、配色、甚至可能珠了一大堆部必要的套件。)

高效版（精準控制）: 「@keyboard.js @style.css
請實作一個純數字鍵盤元件 (0-9 與清除鍵)。
請遵循 @style.css 裡的配色變數 (CSS Variables)。
排版請使用 CSS Grid，按鈕大小需適合手機端手指點擊（高度至少 48px）。
點擊按鈕時，請在 console 印出對應的數字即可，暫時不需要串接其他邏輯。」

在 AI 原生編輯器中，「清晰的邊界」比「複雜的邏輯」更重要。只要我們將需求切分得足夠細緻，並給予正確的上下文，AI 就能給出完美契合專案架構的程式碼。